<template>
  <div  style="float: left; width: 50%"  >

    <h1 style="line-height: 10px">家常菜</h1>

    <el-breadcrumb separator="/">


      <div style="line-height: 100px" >
        <el-breadcrumb-item :to="{path:'/heat'}" >做过最多</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/score'}" >评分最高</el-breadcrumb-item>
      </div>
    </el-breadcrumb>
        <el-col :span="24 " v-for="(item, index) in menus" :key="index">

            <el-image
              style="width: 230px; height: 200px"
              :src="item.image"
              class="image"></el-image>

          <el-col :span="12">
            <div style="height: 100px;">
              <p >{{item.menuName}}</p>
              <p>有{{item.heat}}人做过</p>
              <p>评分:{{item.score}}分</p>
              <p>作者描述:{{item.depict}}</p></div>
          </el-col>

        </el-col>

</div>

</template>

<script>

export default {
  data() {
    return {
      menus: [],
    };
  },
 methods:{
  selectJCC:function (){

    this.$axios.get("/menuTJ/selectJCC").then(res=>{

      this.menus=res.data.data;
    })
  },
  },
  mounted(){
    this.selectJCC();
  }
}
</script>

<style scoped>

</style>
